'use client'

import FXCanvas from '@/components/effect/FXCanvas'
import GradientButton from '../common/GradientButton'
import OutlineButton from '../common/OutlineButton'

export default function Pricing() {
  const plans = [
    {
      name: 'Free',
      price: '$0',
      subtitle: '/ month',
      screens: '5 / month',
      features: [
        'Live market, competitor, and traction context',
        'Decision-ready summary in minutes',
        'PDF export & report sharing',
        'Bulk uploads (queued processing)'
      ],
      buttonText: 'Get Started',
      highlight: false
    },
    {
      name: 'Kickstart',
      price: '$199',
      subtitle: '/ seat / month',
      screens: '20 / month',
      features: [
        'Live market, competitor, and traction context',
        'Decision-ready summary in minutes',
        'PDF export & report sharing',
        'Bulk uploads (queued processing)'
      ],
      buttonText: 'Choose Plan',
      highlight: false
    },
    {
      name: 'Growth',
      price: '$499',
      subtitle: '/ seat / month',
      screens: '50 / month',
      features: [
        'Live market, competitor, and traction context',
        'Decision-ready summary in minutes',
        'PDF export & report sharing',
        'Bulk uploads (queued processing)',
        'Email-plugin to generate report directly from inbox (Coming soon)'
      ],
      buttonText: 'Choose Plan',
      highlight: true // 最受欢迎
    },
    {
      name: 'Pro',
      price: '$999',
      subtitle: '/ seat / month',
      screens: '100 / month',
      features: [
        'Live market, competitor, and traction context',
        'Decision-ready summary in minutes',
        'PDF export & report sharing',
        'Bulk uploads (simultaneous processing)',
        'Email-plugin to generate report directly from inbox (Coming soon)'
      ],
      buttonText: 'Choose Plan',
      highlight: false
    }
  ]

  return (
    <div className="relative min-h-[50svh] h-auto w-full overflow-hidden flex items-center justify-center">
      <div className="section-accent accent-3 absolute inset-0 z-0 h-full w-full"></div>

      <div className="fx h-full w-full">
        <FXCanvas effect="grid" />
      </div>

      <div className="inset-0 z-10 flex items-center justify-center">
        <div className="max-w-7xl mx-auto">
          <div className="relative text-gray-300 py-32 px-6 md:px-20 overflow-hidden">
            <div className="text-center mb-[30px]">
              <h2 className="text-[44px] font-bold text-white leading-tight">
                Flexible{' '}
                <div className="bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                  Pricing
                </div>
              </h2>
              <p className="mt-6 text-gray-400 max-w-3xl mx-auto text-[18px]">
                Every plan includes its monthly allocation of AI-deck first-reads. Additional first-reads can be
                purchased instantly on demand. No caps, no delays — inGauge scales with your deal flow.
              </p>
            </div>

            {/* 定价卡片 */}
            <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ">
              {plans.map((plan, index) => (
                <div
                  key={index}
                  className={`relative flex flex-col justify-between group overflow-hidden bg-[#101622]
      border-solid border-[#1f2533] rounded-[14px] p-4 
      ttransition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
      hover:-translate-y-[3px] hover:border-[#7C5CFF99] hover:border-2 hover:border-solid  ${
        plan.highlight ? '-translate-y-[3px] border-[#7C5CFF99] border-2 border-solid' : ''
      } transition-all duration-300`}>
                  {/* 热门标识 */}
                  {plan.highlight && (
                    <span className="absolute top-5 right-5 text-xs font-medium px-3 py-1 bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-black rounded-full">
                      Most Popular
                    </span>
                  )}

                  <div>
                    <h3 className="text-[18px] font-semibold text-white mb-2">{plan.name}</h3>
                    <div className="flex items-end mb-2">
                      <span className="text-[28px] font-bold text-white">{plan.price}</span>
                      <span className="text-gray-400 ml-2 text-sm">{plan.subtitle}</span>
                    </div>
                    <p className="text-sm text-gray-400 mb-6">
                      Deck Screens: <span className="text-white font-medium">{plan.screens}</span>
                    </p>

                    <ul className="space-y-3 mb-8 text-sm">
                      {plan.features.map((feature, i) => (
                        <li key={i} className="flex items-start gap-2">
                          <span className="text-[#38bdf8] mt-1">✓</span>
                          <span className="text-[#9aa3b2]">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {/* 按钮 */}
                  {index % 2 === 0 && (
                    <GradientButton
                      title={plan.buttonText}
                      fontSize="14px"
                      width="118px"
                      height="36px"
                      radius="12px"
                      onClick={() => {}}
                    />
                  )}
                  {index % 2 !== 0 && (
                    <OutlineButton
                      title={plan.buttonText}
                      fontSize="14px"
                      width="118px"
                      height="36px"
                      radius="12px"
                      onClick={() => {}}
                    />
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
